import 'package:flutter/material.dart';
/// row_demo.dart
///

void main() => runApp(const MaterialApp(home: DemoRowWidget()));

class DemoRowWidget extends StatelessWidget {
  const DemoRowWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ch14 row demo'),),
      // body: const MyRow(),
      // body: const MyRowWithExpanded(),
      body: const MyRow2(),
    );
  }
}

/// Row 示例
///
class MyRow2 extends StatelessWidget {
  const MyRow2({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Row(
      // center, start, end, spaceAround, spaceBetween, spaceEvenly
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      // center, baseline(报错), start, end, stretch
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(color: Colors.yellow, width: 60, height: 80,),
        Container(color: Colors.red, width: 100, height: 180,),
        Container(color: Colors.black, width: 60, height: 80,),
        Container(color: Colors.green, width: 60, height: 80,),
      ],
    );
  }
}



/// Row 示例
/// Expanded, flex
///
class MyRowWithExpanded extends StatelessWidget {
  const MyRowWithExpanded({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(flex: 1, child: Container(color: Colors.yellow, width: 60, height: 80,)),
        Container(color: Colors.red, width: 100, height: 180,),
        Container(color: Colors.black, width: 60, height: 80,),
        Expanded(flex: 1, child: Container(color: Colors.green, width: 60, height: 80,))
      ],
    );
  }
}


/// Row 示例
///
class MyRow extends StatelessWidget {
  const MyRow({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(color: Colors.yellow, width: 60, height: 80,),
        Container(color: Colors.red, width: 100, height: 180,),
        Container(color: Colors.black, width: 60, height: 80,),
        Container(color: Colors.green, width: 60, height: 80,),
      ],
    );
  }
}

